<template>
  <div class="main">
    <div class="w">
      <div class="smallKind">
        <div class="navLeft">
          <ul>
            <li>
              <div>成人高等学历教学资源</div>
              <div class="contRight">
                <div class="cont">
                  <div class="lessonKind">课程分类</div>
                  <div class="list">
                    <div
                      class="lessonName"
                      v-for="(it, index) in cats"
                      :key="index"
                      @click="getOneLevel(it, index)"
                    >
                      {{ it.name }}
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div>职业技能培训教学资源</div>
              <div class="twoRight">
                <div class="cont">
                  <div class="lessonKind">课程分类</div>
                  <div class="list">
                    <div class="lessonName">摄影师</div>
                    <div class="lessonName">平面设计师</div>
                    <div class="lessonName">食品检验员</div>
                    <div class="lessonName">眼镜验光员</div>
                    <div class="lessonName">农业技术员</div>
                    <div class="lessonName">数字动画制作</div>
                    <div class="lessonName">建造师</div>
                    <div class="lessonName">平面设计师</div>
                    <div class="lessonName">计算机维修工</div>
                    <div class="lessonName">计算机程序员</div>
                    <div class="lessonName">物流师</div>
                    <div class="lessonName">物联网技术员</div>
                    <div class="lessonName">大数据工程技术员</div>
                    <div class="lessonName">人工智能工程技术员</div>
                    <div class="lessonName">电子商务</div>
                    <div class="lessonName">人力资源管理师</div>
                    <div class="lessonName">健康管理师</div>
                    <div class="lessonName">中式烹调师</div>
                    <div class="lessonName">电梯安装维修工</div>
                    <div class="lessonName">物业管理员</div>
                    <div class="lessonName">金融服务就业</div>
                    <div class="lessonName">消防设施操作员</div>
                    <div class="lessonName">厨务管理</div>
                    <div class="lessonName">养老护理员</div>
                    <div class="lessonName">农产品食品检验员</div>
                    <div class="lessonName">家政服务员</div>
                    <div class="lessonName">酒店管理</div>
                    <div class="lessonName">家畜繁殖员</div>
                    <div class="lessonName">医疗辅助护理员</div>
                    <div class="lessonName">汽车维修工</div>
                    <div class="lessonName">焊工</div>
                    <div class="lessonName">服装制作工</div>
                    <div class="lessonName">架子工</div>
                    <div class="lessonName">育婴员</div>
                    <div class="lessonName">农艺工</div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <a href="https://hnzjgl.gov.cn/" target="_blank"
                ><div>专业技术人员教育教学资源</div></a
              >
            </li>
            <li>
              <a href="http://www.hnzsxx.net/default.aspx" target="_blank"
                ><div>全民终身学习服务</div></a
              >
            </li>
            <li>
              <a href="https://xue.yszn.net.cn/" target="_blank"
                ><div>乡村振兴人才培养服务</div></a
              >
            </li>
            <li>
              <a href="http://www.hnlll.cn/Agedaiuta2.aspx" target="_blank"
                ><div>老年教育与健康养护服务</div></a
              >
            </li>
          </ul>
        </div>
        <div class="bannerBox">
          <el-carousel height="459px">
            <!-- <el-carousel-item v-for="(item,index) in banner" :key="index">
                    <img :src="$store.state.api+'?path='+item.path" alt="">
                  </el-carousel-item> -->
            <el-carousel-item>
              <img src="../assets/banner-b.png" @click="about" />
            </el-carousel-item>
            <el-carousel-item>
              <a href="http://muhuaedu.mikecrm.com/LFdx0kf" target="_blank"
                ><img src="../assets/banner-c.jpg"
              /></a>
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/banner-d.png" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="offer">
      <div class="w">
        <div class="offerTitle">优质资源 共建共享</div>
        <ul>
          <li>
            <p>合作院校</p>
            <span><b>42</b>所</span>
          </li>
          <li>
            <p>课程数</p>
            <span><b>1226</b>门</span>
          </li>
          <li>
            <p>资源数</p>
            <span><b>151840</b>个</span>
          </li>
          <li>
            <p>选课数</p>
            <span><b>613</b>万人次</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="w">
      <div class="ranking">
        <div class="hot">
          <div class="smallTitle">
            <div class="iconImg">
              <img src="../assets/queen.png" alt="" />热门课程排行
            </div>
            <span>Popular Courses</span>
          </div>
          <ul>
            <!-- <li v-for="(item,index) in hotCourse" :key="index">
                  <router-link
                    :to="{ path: 'lessonIntroduce/' + item.id }"
                  >
                    <div class="idx">{{index+1}}</div>
                    <div class="schoolImg"><img :src="$store.state.api+'?path='+item.fm" alt=""></div>
                    <div class="textBox">
                      <h4>{{item.name}}</h4>
                      <p>{{item.School}}</p>
                      <span>{{item.ref}}人选课</span>
                    </div>
                  </router-link>
                </li> -->
            <li>
              <div class="idx">1</div>
              <div class="schoolImg">
                <img src="../assets/ke-a.png" alt="" />
              </div>
              <div class="textBox">
                <h4>毛泽东思想和中国特色社会主义</h4>
                <p></p>
                <span>12.8万人选课</span>
              </div>
            </li>
            <li>
              <div class="idx">2</div>
              <div class="schoolImg">
                <img src="../assets/ke-c.png" alt="" />
              </div>
              <div class="textBox">
                <h4>形势与政策</h4>
                <p></p>
                <span>12.4万人选课</span>
              </div>
            </li>
            <li>
              <div class="idx">3</div>
              <div class="schoolImg">
                <img src="../assets/ke-b.jpg" alt="" />
              </div>
              <div class="textBox">
                <h4>思想道德修养与法律基础</h4>
                <p></p>
                <span>9.6万人选课</span>
              </div>
            </li>
            <li>
              <div class="idx">4</div>
              <div class="schoolImg">
                <img src="../assets/ke-d.jpg" alt="" />
              </div>
              <div class="textBox">
                <h4>大学英语</h4>
                <p></p>
                <span>9.4万人选课</span>
              </div>
            </li>
            <li>
              <div class="idx">5</div>
              <div class="schoolImg">
                <img src="../assets/ke-e.png" alt="" />
              </div>
              <div class="textBox">
                <h4>高等数学</h4>
                <p></p>
                <span>9.2万人选课</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="sort">
          <div class="smallTitle">
            <div class="iconImg">
              <img src="../assets/queen.png" alt="" />课程贡献排行
            </div>
            <span>Course contribution</span>
          </div>
          <ul>
            <!-- <li v-for="(item,index) in courseSort" :key="index">
                  <router-link
                    :to="{ path: 'academyDetails/' + item.id }"
                  >
                  <div class="idx">{{index+1}}</div>
                   <div class="leftBox">
                        <div class="schoolLogo"><img :src="$store.state.api+'?path='+item.icon" alt=""></div>
                        <div class="num">建课{{item.courseCount}}门</div>
                   </div>
                  
                  </router-link>
                </li> -->
            <li>
              <div class="idx">1</div>
              <div class="leftBox">
                <div class="schoolLogo">
                  <img src="../assets/school-g.png" />
                </div>
                <div class="num">建课84门</div>
              </div>
            </li>
            <li>
              <div class="idx">2</div>
              <div class="leftBox">
                <div class="schoolLogo">
                  <img src="../assets/school-e.png" />
                </div>
                <div class="num">建课65门</div>
              </div>
            </li>
            <li>
              <div class="idx">3</div>
              <div class="leftBox">
                <div class="schoolLogo">
                  <img src="../assets/school-c.png" />
                </div>
                <div class="num">建课54门</div>
              </div>
            </li>
            <li>
              <div class="idx">4</div>
              <div class="leftBox">
                <div class="schoolLogo">
                  <img src="../assets/school-b.png" />
                </div>
                <div class="num">建课43门</div>
              </div>
            </li>
            <li>
              <div class="idx">5</div>
              <div class="leftBox">
                <div class="schoolLogo">
                  <img src="../assets/school-a.png" />
                </div>
                <div class="num">建课40门</div>
              </div>
            </li>
            <li>
              <div class="idx">6</div>
              <div class="leftBox">
                <div class="schoolLogo">
                  <img src="../assets/school-d.png" />
                </div>
                <div class="num">建课35门</div>
              </div>
            </li>
            <li>
              <div class="idx">7</div>
              <div class="leftBox">
                <div class="schoolLogo">
                  <img src="../assets/school-f.png" />
                </div>
                <div class="num">建课32门</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w">
      <div class="commonTitle">
        <h4>新闻资讯</h4>
        <p>News and information</p>
      </div>
    </div>
    <div class="newsBox">
      <div class="w">
        <div class="messageBox">
          <div class="title">
            <div class="tabNav">
              <span
                v-for="(item, index) in tabsParam"
                :key="index"
                @click="toggleTabs(index)"
                :class="{ 'active-class': nowIndex === index }"
                >{{ item.name }}</span
              >
              <!-- <span>政策法规</span> -->
            </div>
              <div class="more"  @click="setIndex">
                查看更多<img src="../assets/link.png" alt="" />
              </div>
          </div>
          <div class="listBox">
            <div class="news" v-show="nowIndex === 0">
              <ul>
                <li v-for="(item, id) in newsDetails" :key="id">
                  <div class="time">{{ uptime }}</div>
                  <h5>{{ item.title }}</h5>
                  <p v-html="item.content">{{ item.content }}</p>
                </li>
              </ul>
            </div>
            <div v-show="nowIndex === 1">
              <ul>
                <li>
                  <div class="time">2021-09-10</div>
                  <h5>
                    省委深改委会议暨财经委第二次会议召开
                    研究郑州大学“双一流”建设等工作
                  </h5>
                  <p>
                    8月17日，省委书记楼阳生主持召开省委深改委会议暨财经委第二次会议，传达学习
                    习近平总书记在中央全面深化改革委员会第二十次会议上重要讲话精神，研究国资国
                    企改革、事业单位改革、省科学院重建重振、郑州大学“双一流”建设等工作。省长王
                    凯出席。
                  </p>
                </li>
                <li>
                  <div class="time">2021-08-29</div>
                  <h5>
                    省委深改委会议暨财经委第二次会议召开
                    研究郑州大学“双一流”建设等工作
                  </h5>
                  <p>
                    8月17日，省委书记楼阳生主持召开省委深改委会议暨财经委第二次会议，传达学习
                    习近平总书记在中央全面深化改革委员会第二十次会议上重要讲话精神，研究国资国
                    企改革、事业单位改革、省科学院重建重振、郑州大学“双一流”建设等工作。省长王
                    凯出席。
                  </p>
                </li>
                <li>
                  <div class="time">2021-08-29</div>
                  <h5>
                    省委深改委会议暨财经委第二次会议召开
                    研究郑州大学“双一流”建设等工作
                  </h5>
                  <p>
                    8月17日，省委书记楼阳生主持召开省委深改委会议暨财经委第二次会议，传达学习
                    习近平总书记在中央全面深化改革委员会第二十次会议上重要讲话精神，研究国资国
                    企改革、事业单位改革、省科学院重建重振、郑州大学“双一流”建设等工作。省长王
                    凯出席。
                  </p>
                </li>
                <li>
                  <div class="time">2021-08-29</div>
                  <h5>
                    省委深改委会议暨财经委第二次会议召开
                    研究郑州大学“双一流”建设等工作
                  </h5>
                  <p>
                    8月17日，省委书记楼阳生主持召开省委深改委会议暨财经委第二次会议，传达学习
                    习近平总书记在中央全面深化改革委员会第二十次会议上重要讲话精神，研究国资国
                    企改革、事业单位改革、省科学院重建重振、郑州大学“双一流”建设等工作。省长王
                    凯出席。
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="noticeBox">
          <div class="title">
            <h5>公告通知</h5>
              <div class="more" @click="setIndex">查看更多<img src="../assets/link.png" alt="" /></div>
          </div>
          <ul>
            <li v-for="(item, id) in notice" :key="id">
              <div class="date">
                <b>{{ date }}</b>
                <span>{{ pubtime }}</span>
              </div>
              <div class="textBox">
                {{ item.title }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w">
      <div class="commonTitle" style="margin: 0">
        <h4>合作院校</h4>
        <p>Co-operative University</p>
      </div>
      <div class="school">
        <ul>
          <li v-for="item in li" :key="item.id">
            <img :src="$store.state.apiFile + item.logo" alt="" />
          </li>
          <li @click="jump" style="cursor: pointer">
            <h2>全部合作院校>></h2>
          </li>
        </ul>
      </div>
    </div>
    <div class="waiLink">
      <div class="w">
        <div class="leftBox">
          <ul>
            <li>
              <a href="http://www.gov.cn/" target="_blank"
                ><div>中国政府网<i class="el-icon-caret-top"></i></div
              ></a>
            </li>
            <li>
              <div @click="drawer = true">
                国务院部门网站<i class="el-icon-caret-top"></i>
              </div>
              <el-drawer
                title="国务院部门网站"
                :visible.sync="drawer"
                :direction="direction"
              >
                <a href="https://www.fmprc.gov.cn/web/" target="_blank"
                  >外交部</a
                >
                <a herf="https://www.fmprc.gov.cn/web/" target="_blank"
                  >国防部</a
                >
              </el-drawer>
            </li>
            <li>
              <div @click="administrative = true">
                教育行政部门<i class="el-icon-caret-top"></i>
              </div>
              <el-drawer
                title="教育行政部门"
                :visible.sync="administrative"
                :direction="direction"
              >
                <a href="http://jw.beijing.gov.cn/" target="_blank"
                  >北京市教育委员会</a
                >
                <a href="http://jyt.henan.gov.cn/" target="_blank"
                  >河南省教育厅</a
                >
              </el-drawer>
            </li>
            <li>
              <div @click="school = true">
                合作院校<i class="el-icon-caret-top"></i>
              </div>
              <el-drawer
                title="合作院校"
                :visible.sync="school"
                :direction="direction"
              >
                <span>我来啦5456151!</span>
              </el-drawer>
            </li>
            <li>
              <div @click="company = true">
                合作企业<i class="el-icon-caret-top"></i>
              </div>
              <el-drawer
                title="合作企业"
                :visible.sync="company"
                :direction="direction"
              >
                <span>我来啦5456151!</span>
              </el-drawer>
            </li>
          </ul>
        </div>
        <div class="imgBox">
          <img src="../assets/weibo.png" alt="" />
          <img src="../assets/wechat.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  HOTCOURSE,
  SCHOOL,
  DATAVIEW,
  BANNER,
  SCHOOLLIST,
  CATS,
  ARTICLE,
} from "@/api/api";
import { _axios } from "@/api/_axios";

export default {
  name: "index",
  components: {},
  data() {
    return {
      notice: [],
      date: "",
      pubtime: "",
      uptime: "",
      newsDetails: [],
      cats: [],
      drawer: false,
      school: false,
      company: false,
      administrative: false,
      direction: "btt",
      isShow: false,
      tabPosition: "left",
      hotCourse: [],
      courseSort: [],
      banner: [],
      li: [],
      nowIndex: 0,
      nowsIndex: 0,
      isShow: false,
      dataview: "",
      tabsParam: [{ name: "新闻资讯" }, { name: "政策法规" }],
    };
  },
  mounted() {
    this.getBanner();
    this.getHotcourse();
    this.getCourseSort();
    this.getDataview();
    this.getSchool();
    this.getCats();
    this.getArticle();
    this.getDetails();
    this.getNotice();
  },
  methods: {
    getCats() {
      _axios(CATS, {}, "get").then((res) => {
        // console.log('分类',res)
        this.cats = res.data;
      });
    },
    //   getOneLevel(item,index){
    //    this.$refs.pagination.currentPage = 1
    //   console.log(11111,item)
    //   this.oneLevel = index
    //   this.catId = item.id
    //   if(item.name == '全部'){
    //     this.catId = ''
    //   }
    //   this.getCourse()
    // },
    getBanner() {
      _axios(BANNER, {}, "get").then((res) => {
        // console.log('轮播',res)
        this.banner = res.data;
      });
    },
    toggleTabs(index) {
      this.nowIndex = index;
    },
    getHotcourse() {
      _axios(HOTCOURSE, {}, "get").then((res) => {
        // console.log('热门课程',res)
        if (res.code == 0) {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].School = res.data[i].School
              ? res.data[i].School.name
              : "-";
          }
          this.hotCourse = res.data;
        }
      });
    },
    getDataview() {
      _axios(DATAVIEW, {}, "get").then((res) => {
        // console.log('大数据',res)
        if (res.code == 0) {
          this.dataview = res.data;
        }
      });
    },
    getSchool() {
      _axios(
        SCHOOLLIST,
        {
          page: 1,
          limit: 999,
        },
        "get"
      ).then((res) => {
        // console.log(res, "学校");
        if (res.code == 0) {
          this.li = res.data.splice(0, 11);
        }
      });
    },
    getCourseSort() {
      _axios(SCHOOL, {}, "get").then((res) => {
        // console.log('课程贡献榜',res)
        if (res.code == 0) {
          this.courseSort = res.data;
        }
      });
    },
    getOneLevel(item, index) {
      console.log(item, index);
      sessionStorage.setItem("titleIndex", 1);
      this.$router.push({
        name: "lesson",
        params: {
          id: item.id,
          index: index,
        },
      });
    },
    jump() {
      sessionStorage.setItem("titleIndex", 2);
      this.$router.push({
        name: "academyList",
      });
    },
    about() {
      sessionStorage.setItem("titleIndex", 4);
      this.$router.push({
        name: "about",
      });
    },
    setIndex(){
      sessionStorage.setItem("titleIndex", 3);
      this.$router.push({
        name: "newsList",
      });
    },
    getArticle(id) {
      _axios(
        ARTICLE + "?" + "page=1" + "&" + "limit=4" + "&" + "type=news",
        {},
        "get"
      ).then((res) => {
        // console.log(res,'文章')
        if (res.code == 0) {
          // console.log(res,'文章')
          this.newsDetails = res.data;
          for (let i = 0; i < this.newsDetails.length; i++) {
            this.getDetails(i, this.newsDetails[i].id);
            console.log(this.newsDetails[i].uptime);
            this.uptime = this.newsDetails[i].uptime.split(" ")[0];
          }
        }
      });
    },
    getDetails(i, id) {
      _axios(ARTICLE + "/" + id, {}, "get").then((res) => {
        if (res.code == 0) {
          // console.log(res,'详情')
          this.newsDetails[i].content = res.data.content;
        }
      });
    },
    getNotice() {
      _axios(
        ARTICLE + "?" + "page=1" + "&" + "limit=3" + "&" + "type=notice",
        {},
        "get"
      ).then((res) => {
        // console.log(res,'文章')
        if (res.code == 0) {
          this.notice = res.data;
          // console.log(res,'通知')
          for (let i = 0; i < this.notice.length; i++) {
            this.date = this.notice[i].pubtime.substring(8, 10);
            this.pubtime = this.notice[i].pubtime.substring(0, 7);
          }
          //  console.log(this.notice,'通知')
        }
      });
    },
  },
};
</script>


<style scoped>
.smallKind {
  margin-top: 46px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.smallKind .navLeft {
  width: 308px;
}
.smallKind .navLeft li {
  position: relative;
  width: 308px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  font-size: 20px;
  color: #2154c1;
  background-color: #fff;
  margin-bottom: 7px;
  box-shadow: 0px 0px 10px 0px rgba(52, 49, 169, 0.15);
  font-weight: bold;
}
.smallKind .navLeft li a {
  font-size: 20px;
  color: #2154c1;
}
.smallKind .bannerBox {
  width: 873px;
}
.smallKind .bannerBox img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.smallKind .navLeft li:nth-child(1):hover {
  width: 302px;
  height: 64px;
  line-height: 64px;
  cursor: pointer;
  border-top: 3px solid #2154c1;
  border-left: 3px solid #2154c1;
  border-bottom: 3px solid #2154c1;
}
.smallKind .navLeft li:nth-child(2):hover {
  width: 302px;
  height: 64px;
  line-height: 64px;
  cursor: pointer;
  border-top: 3px solid #2154c1;
  border-left: 3px solid #2154c1;
  border-bottom: 3px solid #2154c1;
}
.smallKind .navLeft li:nth-child(1):hover::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -25px;
  z-index: 999;
  width: 25px;
  height: 64px;
  background-color: #fff;
  border-top: 3px solid #2154c1;
  border-bottom: 3px solid #2154c1;
}
.smallKind .navLeft li:nth-child(2):hover::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -25px;
  z-index: 999;
  width: 25px;
  height: 64px;
  background-color: #fff;
  border-top: 3px solid #2154c1;
  border-bottom: 3px solid #2154c1;
}
.smallKind .navLeft li:nth-child(1):hover > .contRight {
  display: block;
}
.smallKind .navLeft li:nth-child(2):hover > .twoRight {
  display: block;
}
.smallKind .contRight {
  display: none;
  z-index: 99;
  position: absolute;
  right: -896px;
  top: -3px;
  width: 874px;
  height: 459px;
  background-color: #fff;
  padding: 25px 30px;
  border: 3px solid #2154c1;
  box-sizing: border-box;
}
.smallKind .twoRight {
  display: none;
  z-index: 99;
  position: absolute;
  right: -896px;
  top: -81px;
  width: 874px;
  height: 459px;
  background-color: #fff;
  padding: 25px 30px;
  border: 3px solid #2154c1;
  box-sizing: border-box;
}

.lessonKind {
  width: 156px;
  height: 43px;
  line-height: 43px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  background-color: #2154c1;
  margin-bottom: 20px;
}
.list {
  display: flex;
  flex-wrap: wrap;
}
.list .lessonName {
  width: 155px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #333333;
  display: inline-block;
  position: relative;
  text-align: center;
}
.list .lessonName::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 17px;
  background-color: #333333;
}
.list .lessonName::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: #eeeeee;
}
.list .lessonName:nth-child(5n)::before {
  display: none;
}
.offer {
  width: 100%;
  height: 409px;
  padding-top: 80px;
  box-sizing: border-box;
  background: url(../assets/bg.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  margin-bottom: 20px;
}
.offerTitle {
  font-size: 40px;
  color: #ffffff;
}
.offer ul {
  display: flex;
  justify-content: space-between;
  margin-top: 145px;
  padding: 0 140px;
  box-sizing: border-box;
  color: #284de7;
}
.offer li p {
  font-size: 22px;
}
.offer li span {
  font-size: 16px;
}
.offer li span b {
  font-size: 36px;
}
.ranking {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.hot,
.sort {
  width: 588px;
  background-color: #fff;
  padding: 25px 25px 10px;
  box-sizing: border-box;
}
.smallTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}
.smallTitle .iconImg img {
  width: 32px;
  height: 20px;
  margin-right: 7px;
}
.smallTitle .iconImg {
  font-size: 27px;
  font-weight: bold;
  color: #d1802b;
}
.smallTitle span {
  font-size: 18px;
  color: #e3e4e3;
}
.hot li {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 101px;
  margin-bottom: 27px;
}
.hot li:nth-last-child(1) {
  margin-bottom: 0;
}
.hot li a {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 101px;
  margin-bottom: 20px;
}
.hot li .idx {
  text-align: center;
  line-height: 67px;
  margin-right: 18px;
  font-size: 18px;
  color: #b8b8b8;
}
.hot li:nth-child(1) .idx,
.sort li:nth-child(1) .idx {
  color: #fa5055;
}
.hot li:nth-child(2) .idx,
.sort li:nth-child(2) .idx {
  color: #ff7130;
}
.hot li:nth-child(3) .idx,
.sort li:nth-child(3) .idx {
  color: #ffb425;
}

.hot li .schoolImg img {
  width: 170px;
  height: 101px;
  margin-right: 24px;
}
.hot li .textBox {
  width: 100%;
}
.hot li .textBox h4 {
  font-size: 22px;
  color: #333333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.hot li .textBox p {
  font-size: 18px;
  color: #333333;
  margin: 7px 0;
}
.hot li .textBox span {
  display: inline-block;
  margin-top: 30px;
  font-size: 18px;
  color: #333333;
}
.sort li {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 17px;
}
.sort li .leftBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 17px;
  border-bottom: 1px dashed #999999;
}
.sort li:nth-last-child(1) {
  margin-bottom: 0;
}
.sort li:nth-last-child(1) .leftBox {
  border-bottom: none;
}
.sort li a {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 35px;
}
.sort li .idx {
  line-height: 50px;
  margin-right: 37px;
}
.sort li .num {
  line-height: 50px;
  font-size: 24px;
  color: #333333;
}
/* .sort li .schoolLogo {
  width: 200px;
  height: 57px;
} */
.sort li .schoolLogo img {
  /* width: 100%; */
  height: 57px;
}
.commonTitle {
  text-align: center;
  margin: 50px 0 0;
}
.commonTitle h4 {
  font-size: 40px;
  color: #040000;
}
.commonTitle p {
  font-size: 16px;
  color: #dbdadb;
}
.newsBox {
  width: 100%;
  height: 707px;
  padding-top: 59px;
  box-sizing: border-box;
  background: url(../assets/ju.png) no-repeat;
  background-size: 100% 100%;
}
.newsBox .w {
  display: flex;
  justify-content: space-between;
}
.newsBox .messageBox {
  width: 782px;
}
.newsBox .messageBox .title {
  width: 100%;
  padding: 26px 40px 0 33px;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: 37px;
}
.newsBox .messageBox .title span {
  display: inline-block;
  margin-right: 40px;
  font-size: 26px;
  color: #333333;
}
.newsBox .messageBox .title .active-class {
  color: #284de7;
}

.newsBox .messageBox .title .more img {
  margin-left: 13px;
  vertical-align: bottom;
}
.newsBox .messageBox ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.newsBox .messageBox li {
  position: relative;
  width: 382px;
  height: 204px;
  padding: 26px 15px;
  box-sizing: border-box;
  background: url(../assets/bg-a.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 25px;
}
.newsBox .messageBox li .time {
  padding: 0 5px;
  position: absolute;
  z-index: 99;
  left: 30px;
  top: -13px;
  font-size: 18px;
  color: #fff;
}
.newsBox .messageBox li h5 {
  height: 50px;
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 26px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.newsBox .messageBox li p {
  font-size: 16px;
  color: #ffffff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.newsBox .noticeBox {
  width: 388px;
}
.newsBox .noticeBox .title {
  display: flex;
  justify-content: space-between;
  padding: 26px 20px 0 33px;
  height: 80px;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 37px;
}
.newsBox .noticeBox .title h5 {
  font-size: 26px;
  color: #2154c1;
}
.newsBox .messageBox .title .more,
.newsBox .noticeBox .title .more {
  cursor: pointer;
  font-size: 16px;
  color: #2154c1;
  padding-top: 8px;
}
.newsBox .noticeBox .title .more img {
  margin-left: 13px;
  vertical-align: bottom;
}
.newsBox .noticeBox li {
  width: 100%;
  padding: 25px 30px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.newsBox .noticeBox li .date {
  height: 78px;
  padding-top: 10px;
  box-sizing: border-box;
  text-align: center;
  background-color: #2154c1;
  opacity: 0.5;
  margin-right: 12px;
}
.newsBox .noticeBox li .date b {
  font-size: 30px;
  color: #fff;
  margin-bottom: 14px;
}
.newsBox .noticeBox li .date span {
  font-size: 16px;
  color: #fff;
}
.newsBox .noticeBox li .textBox {
  width: 100%;
  height: 55px;
  font-size: 20px;
  color: #000000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.school {
  padding-top: 59px;
  width: 100%;
}
.school ul {
  display: flex;
  flex-wrap: wrap;
}
.school ul li {
  width: 286px;
  height: 130px;
  padding: 35px;
  margin-bottom: 20px;
  margin-right: 18px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(52, 49, 169, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
}
.school ul li:nth-child(4n) {
  margin-right: 0;
}
.school ul li img {
  width: 100%;
  /* height: 100%; */
}
.school ul li h2 {
  text-align: center;
  height: 60px;
  line-height: 60px;
}

.waiLink {
  width: 100%;
  height: 117px;
  box-sizing: border-box;
  background-color: #2154c1;
  margin-top: 50px;
}
.waiLink .w {
  display: flex;
  justify-content: space-between;
}
.waiLink .leftBox {
  width: 80%;
}
.waiLink .leftBox ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.waiLink .leftBox ul li {
  height: 116px;
  position: relative;
  font-size: 20px;
  color: #ffffff;
  padding: 40px 26px 0;
  box-sizing: border-box;
}
.waiLink .leftBox ul li a {
  color: #fff;
}
.waiLink .leftBox ul li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #255dd4;
}

.waiLink .imgBox {
  width: 12%;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
}
.waiLink .imgBox img {
  width: 54px;
  height: 54px;
}
/deep/ .el-drawer__header {
  margin-bottom: 20px;
}
/deep/ .el-drawer__body {
  padding: 0 20px 20px;
}
/deep/ .el-drawer__body a {
  font-size: 14px;
  color: #284de7 !important;
}
</style>
